<template>
    <div class="details-box">
        <div v-if="breadcrumbList.length > 0" class="top flex">
            <el-breadcrumb class="my-breadcrumb">
                <el-breadcrumb-item :to="{}" v-for="item in breadcrumbList">
                    {{ item.label }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div v-if="!!details" class="bottom">
            <ElRow :gutter="12">
                <ElCol :span="8">
                    <div class="item flex">
                        <div class="label">品类中文名称:</div>
                        <div class="value">{{ details?.chineseName || '' }}</div>
                    </div>
                </ElCol>
                <ElCol :span="8">
                    <div class="item flex">
                        <div class="label">品类ID：</div>
                        <div class="value">{{ details?.categoryId || '' }}</div>
                    </div>
                </ElCol>
                <ElCol :span="8">
                    <div class="item flex">
                        <div class="label">创建时间：</div>
                        <div class="value">{{ details?.createTime || '' }}</div>
                    </div>
                </ElCol>
                <ElCol :span="8">
                    <div class="item flex">
                        <div class="label">品类英文名称：</div>
                        <div class="value">{{ details?.englishName || '' }}</div>
                    </div>
                </ElCol>
                <ElCol :span="8">
                    <div class="item flex">
                        <div class="label">创建者：</div>
                        <div class="value">{{ details?.createUserName || '' }}</div>
                    </div>
                </ElCol>
                <ElCol :span="8">
                    <div class="item flex">
                        <div class="label">更新时间：</div>
                        <div class="value">{{ details?.updateTime || details?.createTime || '' }}</div>
                    </div>
                </ElCol>
                <ElCol :span="16">
                    <div class="item flex">
                        <div class="label">品类ICON：</div>
                        <div class="value" v-if="!!details?.iconId && !!details?.iconName">{{ `${details?.iconName || ''}` }}</div>
                        <div class="link" v-if="!!details?.iconId && !!details?.iconName" @click="downloadIcon">点击下载</div>
                    </div>
                </ElCol>
                <ElCol :span="16">
                    <div class="item flex">
                        <div class="label">品类Profile：</div>
                        <div class="value" v-if="!!details?.fileId && !!details?.profileName">{{ details?.profileName || '' }}</div>
                        <div class="link" v-if="!!details?.fileId && !!details?.profileName" @click="downloadProfile">点击下载</div>
                    </div>
                </ElCol>
            </ElRow>
            <ElButton type="primary" class="button" @click="editNode">修改</ElButton>
        </div>
        <MyCategoryFormDialog ref="myCategoryFormDialog" @complete="editNodeComplete"></MyCategoryFormDialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import MyCategoryFormDialog from './CategoryFormDialog.vue';
interface BreadcrumbData {
    id: number;
    label: string;
}

const breadcrumbList = ref<BreadcrumbData[]>([]);

const details = ref();

const downloadIcon = async () => {
    if (details.value?.id) {
        const res = await MyService.product.getCategoryIcon({ id: details.value.id });
        if (res) {
            MyModule.utile.downloadFileByUrl(new Blob([new Uint8Array(res)], { type: 'image/png' }), `${details.value.englishName}_icon.png`);
        }
    }
};

const downloadProfile = async () => {
    if (details.value?.fileId) {
        const res = await MyService.product.getProfileDownloadUrl({ fileId: details.value.fileId });
        if (res.code === 200 && res.data) {
            MyModule.utile.downloadFileByUrl(res.data);
        } else {
            ElMessage.error({
                message: res.msg || '文件下载失败',
            });
        }
    }
};

const getData = async (id: string) => {
    const res = await MyService.product.getCategoryDetails({ id });
    if (res.code === 200) {
        details.value = res.data;
    }
};

const myCategoryFormDialog = ref();

const editNode = async () => {
    const data: any = {
        id: details.value.id || '',
        chineseName: details.value.chineseName,
        englishName: details.value.englishName || '',
        fileId: details.value.fileId || '',
        iconId: details.value.iconId || '',
        icon: null,
    };
    if (data.iconId) {
        data.icon = {
            name: `${data.iconId}.${details.value.iconSuffix}`,
        };
    }

    myCategoryFormDialog.value.open(true, data);
};

const editNodeComplete = (result: boolean) => {
    if (result) {
        getData(details.value.dictId);
    }
};

const refresh = (data: BreadcrumbData[], id: string) => {
    breadcrumbList.value = data;
    if (id) {
        getData(id);
    } else {
        details.value = null;
    }
};

defineExpose({
    refresh,
});
</script>

<style scoped>
.details-box {
    padding-left: 24px;
}
.top {
    height: 32px;
    align-items: center;
}
.bottom {
    padding: 12px 24px;
}
.item {
    height: 48px;
    align-items: center;
    font-size: 14px;
    gap: 16px;
}
.label {
    width: 108px;
    color: var(--el-text-color-regular);
}
.link {
    color: var(--el-color-primary);
    cursor: pointer;
}
.button {
    width: 80px;
}
</style>
